<template>
  <div class="box">
  <el-dialog
    draggable
    :model-value="dialogVisible"
    title="流程图"
    width="939px"
    @close="close"
  >
    <template #header>
      <div class="header">流程图</div>
    </template>
    <div class="explain" >
      <div class="explain_mode" v-for="(item, i) in colorArray" :key="i">
        <span class="box" :style="{ 'background-color': item.color }"></span>
        {{ item.title }}
      </div>
    </div>
    <section style="padding-right: 10px">
      <div class="flow flex" v-for="(mode, m) in options" :key="m">
        <div class="mode flex radius" v-for="(item, i) in mode" :key="i">
          <aside style="position: relative">
              <span
                class="title"
                :class="{
                  end: item.type == 'end',
                  green:  item.status <= orderStatus && disableGreenTerm(item.status),
                   green1: item.status == 25 && orderStatus==25 ||  item.status == 45 && orderStatus==45  && !disableGreenTerm(item.status),

                  radius: item.radius,
                }"
                :style="{'visibility': item.title == ' ' ? ' hidden' : 'visible', 'width':item.width == 'auto' ? '120px' : '93px'}"
              >
                {{ item.title }}
              </span>
            <!-- 下 -->
            <b v-if="item.line" class="line-down" :class="item.line"></b>

            <img
              v-if=" item.status <= orderStatus && item.status !=1 && disableGreenTerm(item.status)"
              class="activeIcon"
              :src="`https://dc-app-oss.oss-cn-zhangjiakou.aliyuncs.com/dms/image/active.png`"
              alt=""
            />
            <img
              v-if=" item.status == 25 && orderStatus==25 ||  item.status == 45 && orderStatus==45  && !disableGreenTerm(item.status)"
              class="activeIcon"
              :src="`https://dc-app-oss.oss-cn-zhangjiakou.aliyuncs.com/dms/image/active.png`"
              alt=""
            />
          </aside>
          <!-- 右 -->
          <b
            v-if="
                i < mode.length - 1 &&
                item.type != 'right-up' &&
                item.type != 'line-left' &&
                item.type != 'line-not'&&
                item.type !='null'
              "
            class="line-right"
          ></b>
          <!-- 左 -->
          <b v-if="item.type == 'line-left'" class="line-left"></b>
          <!-- 右上 -->
          <div v-show="item.type == 'right-up'" class="line-right-up">
            <span class="right"></span>
            <span class="up"></span>
          </div>

          <!-- line-max -->
          <b
            v-if="item.type == 'line-max'"
            class="line-max"
            :class="item.line"
          ></b>
        </div>
      </div>
    </section>
<!--    <section>
      <div class="flow flex" v-for="(mode, m) in options" :key="m">
        <div class="mode flex"  v-for="(item, i) in mode" :key="i">
          <aside style="position: relative;width: 130px" >
&lt;!&ndash;            // active: item.status == orderStatus,
            grey: item.status > orderStatus,&ndash;&gt;
            <span
             v-if=" item.status !=1"
              class="title"
              :class="{
                green:
                  item.status < orderStatus && disableGreenTerm(item.status),
                end: item.type == 'end' || item.type == 'left-up',
                brown: disableBrownTerm(item.status),
                radius: item.radius,
              }"
             :style="{'visibility': item.title == ' ' ? ' hidden' : 'visible', 'width':item.width == 'auto' ? '120px' : '93px'}"
            >
              {{ item.title }}
            </span>
            &lt;!&ndash; 下 &ndash;&gt;
            <b v-if="item.line" class="line-down" :class="item.line"></b>
          </aside>
          <span v-if=" item.type !='null'">
          &lt;!&ndash; 右 &ndash;&gt;
          <b
            v-if="i < mode.length - 1 && item.type != 'right-up' && item.type != 'left-up'"
            class="line-right"
          ></b>
          &lt;!&ndash; 左&ndash;&gt;
          <b
              v-if="item.type == 'left-up'"
              class="line-left"
              :class="item.line"
          ></b>
          &lt;!&ndash; 右上 &ndash;&gt;
          <div v-show="item.type == 'right-up'" class="line-right-up">
            <span class="right"></span>
            <span class="up"></span>
          </div>
          </span>
        </div>
      </div>
      <div class="explain">
        <div class="explain_mode" v-for="(item, i) in colorArray" :key="i">
          <span class="box" :style="{ 'background-color': item.color }"></span>
          {{ item.title }}
        </div>
      </div>
    </section>-->
    <template #footer>
      <div class="flex_center">
        <vab-button
          title="知道了"
          type="primary"
          size="default"
          @click="close"
        />
      </div>
    </template>
  </el-dialog>
  </div>
</template>
<script lang="ts" setup>
  import { tr } from 'element-plus/es/locale'

  /**
   * @vab
   */

  const dialogVisible = ref(false)
  const orderStatus = ref(0)
  const colorArray = [
    { color: '#228b22', title: '已完成节点' },
    { color: '#c0c0c0', title: '未完成节点' },
    // { color: '#4e88f3', title: '已完成节点(卖方节点)' },
    // { color: '#696969', title: '已结束节点' },
  ]

  /**
   * @param{
   *  title: '名称',
   *  status : '唯一标识',
   *  type: '类型',
   *  line: '线条类型'
   * }
   */
  const options = ref<any>([
    [
      {
        title: '开始',
        status: -1,
        type: ' ',
        radius:true
      },
      {
        title: '订单创建',
        status: -2,
        type: ' ',
        line: 'solid',
      },
      {
        title: '已审核',
        status: 20,
        type: '',
        line: 'dashed',
      },
      {
        title: '信用额度待充值',
        width:'auto',
        status: 30,
        type: '',
        line: '',
      },
      {
        title: '订单已付款',
        status: 40,
        type: '',
        line: 'dashed',
      },
      {
        title: '已出库',
        status: 80,
        type: 'line-max',
      },
    ],
    [
      {
        title: ' ',
        status: 1,
        type: 'null',
      },
      // { title: '结束', status: 300, type: 'end' },
      // { title: '', status: 1, type: 'null' },
      { title: '存为草稿', status: 0, type: 'right-up', },
      { title: '已取消', status: 25, type: 'null',radius:true },
      { title: ' ', width:'auto',status: 1, type: 'null' },
      { title: '已取消', status: 45, type: 'null',radius:true },
    ],
    [
      {
        title: '结束',
        status: 100,
        type: 'line-not',
        radius:true
      },
      { title: '已收货', status: 90, type: 'line-left' },
    ]
  ])
  /**
   * @method
   */
  const close = () => {
    dialogVisible.value = false
  }
  const open = (status:any) => {
    dialogVisible.value = true
    orderStatus.value = status
    if(status >=40){
      options.value[0][3].title = '信用额度充足'
    }else {
      options.value[0][3].title = '信用额度待充值'
    }
  }

  // 禁用完成条件
  const disableGreenTerm = (status = 0) => {
    if ( status !=25 && status != 45) return true
    return false
  }
  // 禁用未完成条件
  const disableGreyTerm = (status = 0) => {
    return true
  }
  // 禁用end条件
  const disableBrownTerm = (status = 0) => {
    if (orderStatus.value == 100 && status == 100) return true
    if (orderStatus.value == 25 && status == 25) return true
    if (orderStatus.value == 45 && status == 45) return true
    return false
  }

  /**
   * @实例
   */
  defineExpose({
    close,
    open,
  })
</script>

<!--<style lang="scss" scoped>
  section {
    overflow-y: auto;
    padding-bottom: 35px;
  }
  .flow {
    &:first-child {
      margin-bottom: 80px;
    }
    .mode {
      display: flex;
      align-items: center;
      position: relative;
      margin-left: 10px;
      margin-right: 50px;
      border-radius: 2px;
      &:first-child {
        margin-left: 0px;
      }
      &:last-child {
        margin-right: 0px;
      }
      cursor: auto;
      .title {
        padding: 4px 16px;
        color: #ffffff;
        font-size: 12px;
        //white-space: nowrap;
        display: flex;
        align-items: center;
        line-height: 20px;
        justify-content: center;
        position: relative;
        background-color: #c0c0c0;

        // 开始
        &.start {
          border-radius: 20px;
        }
        &.end {
          border-radius: 20px;
          background-color: #c0c0c0;
        }
        // 褐色
        &.brown {
          border-radius: 20px;
          background-color: #696969 !important;
        }
        // 未进行
        &.grey {
          background-color: #c0c0c0;
        }
        // 当前完成项
        &.active {
          //background-color: #4e88f3;
          background-color: #228b22;
        }
        // 已完成项
        &.green {
          background-color: #228b22;
        }
      }
      .line-right {
        font-style: normal;
        border-top: 1px solid #909399;
        width: 50px;
        height: 1px;
        position: absolute;
        top: 50%;
        right: -51px;
        &::after {
          content: '';
          position: absolute;
          top: -6.5px;
          right: -6px;
          width: 0;
          height: 0;
          border-style: solid;
          border-width: 6px 0 6px 6px;
          border-color: transparent transparent transparent #909399;
        }
      }
      .line-left {
        font-style: normal;
        border-top: 1px dashed #909399;
        width: 50px;
        height: 1px;
        position: absolute;
        top: 50%;
        right: -51px;
        &::after {
          content: '';
          position: absolute;
          top: -6.5px;
          left: 0px;
          width: 0;
          height: 0;
          border-style: solid;
          border-width: 6px 6px 6px 0px;
          border-color: transparent #909399 transparent transparent ;
        }
      }
      .line-down {
        font-style: normal;
        border-left: 1px solid #909399;
        width: 10px;
        height: 60px;
        position: absolute;
        top: 36px;
        left: 50%;
        &::after {
          content: '';
          position: absolute;
          bottom: -6.5px;
          left: -6px;
          width: 0;
          height: 0;
          border-style: solid;
          border-width: 6px 6px 0 6px;
          border-color: #909399 transparent transparent transparent;
        }
        &.solid {
          border-left: 1px solid #909399;
        }
        &.dashed {
          border-left: 1px dashed #909399;
        }
      }

      .line-right-up {
        position: static;
        .right {
          position: absolute;
          top: 50%;
          right: -28px;
          border-top: 1px solid #000;
          width: 27px;
          height: 1px;
        }
        .up {
          position: absolute;
          top: -94px;
          right: -28px;
          border-left: 1px solid #909399;
          width: 1px;
          height: 108px;
        }
      }
    }
  }

  aside {
    span {
      cursor: pointer;
    }
  }
  section {
    position: relative;
    .explain {
      position: fixed;
      right:4%;
      //bottom: 8px;
      width: 385px;
      /* height: 100px; */
      display: flex;
      flex-wrap: wrap;
      .explain_mode {
        width: 35%;
        display: flex;
        align-items: center;
        margin-bottom: 12px;
        margin-top: 10px;
        .box {
          width: 40px;
          height: 20px;
          background-color: pink;
          margin-right: 4px;
        }
      }
    }
  }
  .mar{
    margin-right: 90px !important;
  }
</style>-->
<style lang="scss" scoped>
.box {
  :deep() {
    .el-dialog__header {
      border-bottom: 1px solid #e9e9e9 !important;
      margin-right: 0px;
      padding: 12px 24px;
    }
    .el-dialog__headerbtn {
      top: 0;
    }
    .el-dialog__body {
      padding: 17px 24px;
    }

    .el-dialog__footer {
      border-top: 1px solid #e9e9e9;
      padding: 16px 0;
    }
  }
  .header {
    height: 24px;
    font-family: PingFangSC-Medium;
    font-weight: 600 !important;
    font-size: 16px;
    color: #1d2129;
    letter-spacing: 0;
    line-height: 24px;

  }
}

section {
  overflow-y: auto;
  padding: 20px 0px;
}
.flow {
  margin-bottom: 80px;
  &:last-child {
    margin-bottom: 0px;
    justify-content: flex-end;
  }
  .mode {
    display: flex;
    align-items: center;
    position: relative;
    margin-left: 10px;
    margin-right: 50px;
    border-radius: 2px;

    &:first-child {
      margin-left: 0px;
    }
    &:last-child {
      margin-right: 0px;
    }
    cursor: auto;

    .activeIcon {
      position: absolute;
      top: -6px;
      right: -6px;
      width: 16px;
      height: 16px;
      z-index: 11;
    }
    .title {
      padding: 11px 20px;
      font-family: PingFangSC-Medium;
      font-weight: 600;
      font-size: 14px;
      color: #8c8c8c;
      text-align: center;
      white-space: nowrap;
      display: flex;
      align-items: center;
      line-height: 20px;
      justify-content: center;
      position: relative;
      background: #f0f0f0;
      border-radius: 4px;

      &.radius {
        border-radius: 21px;
      }

      // 开始
      &.start {
        border-radius: 20px;
      }
      &.end {
        border-radius: 20px;
        background: #f0f0f0;
        border-radius: 4px;
      }
      // 褐色
      &.brown {
        border-radius: 20px;
        background-color: #696969 !important;
      }
      // 未进行
      &.grey {
        background: #f0f0f0;
        border-radius: 4px;
      }
      // 当前完成项
      &.active {
        background-color: #4e88f3;
      }
      // 已完成项
      &.green {
        background: #c9f5d396;
        color: #149c4a;
      }
      // 已完成项
      &.green1 {
        background: #c9f5d396;
        color: #149c4a;
      }
    }
    .line-right {
      font-style: normal;
      border-top: 1px solid #99e8ae;
      width: 50px;
      height: 1px;
      position: absolute;
      top: 50%;
      right: -51px;
      &::after {
        content: '';
        position: absolute;
        top: -6.5px;
        right: -6px;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 6px 0 6px 6px;
        border-color: transparent transparent transparent #99e8ae;
      }
    }
    .line-left {
      font-style: normal;
      border-top: 1px solid #99e8ae;
      width: 50px;
      height: 1px;
      position: absolute;
      top: 50%;
      left: -51px;
      &::before {
        content: '';
        position: absolute;
        top: -6.5px;
        left: -6px;
        width: 0;
        height: 0;
        border-top: 6px solid transparent;
        border-right: 6px solid #99e8ae;
        border-bottom: 6px solid transparent;
      }
    }
    .line-down {
      font-style: normal;
      border-left: 1px solid #99e8ae;
      width: 10px;
      height: 60px;
      position: absolute;
      top: 48px;
      left: 50%;
      &::after {
        content: '';
        position: absolute;
        bottom: -6.5px;
        left: -6px;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 6px 6px 0 6px;
        border-color: #99e8ae transparent transparent transparent;
      }
      &.solid {
        border-left: 1px solid #99e8ae;
      }
      &.dashed {
        border-left: 1px dashed #99e8ae;
      }
    }
    .line-not {
      display: none;
    }

    .line-right-up {
      position: static;
      .right {
        position: absolute;
        top: 50%;
        right: -28px;
        border-top: 1px solid #99e8ae;
        width: 27px;
        height: 1px;
      }
      .up {
        position: absolute;
        top: -98px;
        right: -28px;
        border-left: 1px solid #99e8ae;
        width: 1px;
        height: 120px;
      }
    }

    .line-max {
      font-style: normal;
      border-left: 1px solid #99e8ae;
      width: 10px;
      height: 181px;
      position: absolute;
      top: 48px;
      left: 79%;
      &::after {
        content: '';
        position: absolute;
        bottom: -6.5px;
        left: -7px;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 6px 6px 0 6px;
        border-color: #99e8ae transparent transparent transparent;
      }
      &.solid {
        border-left: 1px solid #99e8ae;
      }
      &.dashed {
        border-left: 1px dashed #99e8ae;
      }
    }
  }
}

aside {
  span {
    cursor: pointer;
  }
}
section {
  position: relative;
  .explain {
    display: flex;
    justify-content: flex-end;
    .explain_mode {
      display: flex;
      align-items: center;
      // margin-bottom: 12px;
      height: 20px;
      font-family: PingFangSC-Regular;
      font-weight: 500;
      font-size: 12px;
      color: #1d2129;
      letter-spacing: 0;
      line-height: 20px;
      margin-right: 16px;
      &:last-child {
        margin-right: 0px;
      }
      .box {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background-color: #f0f0f0;
        margin-right: 4px;
      }
    }
  }
}
</style>
